<template>
  <q-card class="fit overflow-hidden bg-white">
    <div class="panel-header text-subtitle2 text-blue-grey-9 bg-white" style="padding: 5px 15px;border-bottom: 1px solid #e5e5e5;">模板库</div>
    <q-scroll-area class="panel-body">
      <div class="usage-grid">
        <template v-for="(usage) in usageMap">
          <q-card class="usage-item fit">
            <div class="header q-px-md q-py-sm">
              {{ usage.label }}
            </div>
            <q-separator></q-separator>
            <div class="usage-content-mini" v-if="usage.vnode" v-drag="usage.vnode">
              <RenderByJson :vnode="usage.vnode"></RenderByJson>
            </div>
            <div v-if="usage.vnodeList" class="usage-content-mini" >
              <RenderByJson v-for="item in usage.vnodeList" :vnode="item" v-drag="item"></RenderByJson>
            </div>
          </q-card>
        </template>
      </div>
    </q-scroll-area>
  </q-card>
</template>

<script setup>
import {getUsage} from "../common/getConfig.js"
import RenderByJson from "../RenderByJson/index.vue"

const usageMap = getUsage()
</script>

<style scoped>
.usage-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  grid-template-rows: repeat(auto-fill, max-content);
  padding: 10px;
}

.usage-item {
  display: grid;
  grid-template-rows: 34px 1px 1fr;
}

.header {
  font-size: 12px;
}

.usage-content-mini {
  padding: 10px;
}

.panel-header {
  height: 32px;
  border-bottom: 1px solid #e5e5e5;
}
.panel-body {
  height: calc(100% - 32px);
}
</style>
